<!-- 模块说明 -->
<template>
  <div>
    <el-card class="box-card" style="margin-right: 25px; position: fixed">
      <h1 style="margin-bottom: 20px">{{ paperList.name }}</h1>
      <p>总分：{{ paperList.score }}分</p>
      <p>时间：{{ paperList.suggestTime }}分钟</p>
      <Countdown
        title=""
        :countdown="20 * 60 * 1000"
        format=" m 分 s 秒"
        finishedText="Finished"
      >
      </Countdown>
      <p
        style="
          border-bottom: 1px solid #000;
          padding-bottom: 10px;
          margin-bottom: 10px;
        "
      >
        提交人：{{ "student" }}
      </p>
      <div
        class="box"
        style="
          display: flex;
          border-bottom: 1px solid #000;
          padding-bottom: 10px;
        "
      >
        <div v-for="(item, i) in titleList">
          <p
            style="
              width: 30px;
              height: 30px;
              margin: 5px;
              line-height: 30px;
              text-align: center;
              background-color: var(--el-color-info-light-9);
              color: var(--el-color-info);
              border: 1px solid var(--el-color-info-light-9);
              border-radius: 5px;
              cursor: pointer;
            "
          >
            {{ i + 1 }}
          </p>
        </div>
      </div>
      <el-button style="margin-top: 15px; margin-left: 80px" @click="setSubmit"
        >提交</el-button
      >
    </el-card>
    <div
      style="
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
        width: 1340px;
        margin-left: 290px;
        padding: 20px;
      "
    >
      <div
        ref="text"
        v-for="(o, i) in titleList"
        :key="o"
        class="text item"
        style="
          font-size: 16px;
          padding-bottom: 30px;
          border-bottom: 1px solid #000;
          position: relative;
        "
      >
        <p>{{ i + 1 }}&nbsp;&nbsp;{{ o.name }}</p>
        <p>题目：{{ o.questionItems[0].shortTitle }}</p>
        <p>分数：{{ o.questionItems[0].score }}</p>
        <!-- <el-form :model="o.questionItems[0]" label-width="120px"> -->
        <el-form-item v-if="o.name == '选择题' || '判断题'">
          <el-radio-group v-model="o.questionItems[0].correctArray">
            <el-radio
              v-for="(item, i) in o.questionItems[0].item"
              :label="item"
            />
          </el-radio-group>
        </el-form-item>
        <!-- </el-form> -->
        <input
          v-if="o.name == '简答题'"
          placeholder="填写地方："
          type="text"
          ref="bal"
          v-model="o.questionItems[0].correctArray"
        />
      </div>  
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import Countdown from "./Countdown.vue";
import { findPaperList, addList } from "../../api/index";
import { useRoute } from "vue-router";
const route = useRoute();
const paperList = ref<any>({});
const sumB = ref(0);
// const inputs = ref('');
const datiList = ref<any[]>([]);
// const items = ref<any[]>([]);
const titleList = ref<any>({});
const findPaper = async () => {
  let res = await findPaperList(route.query.id);
  console.log(res);
  paperList.value = res.data;
  datiList.value = res.data.titleItems;
  sumB.value = res.data.suggestTime;
  titleList.value = res.data.titleItems;
  console.log(paperList.value);
};

// const clk = (i: any) => {
//   items.value.push(i);
//   console.log(items.value);
// };
const setSubmit = async () => {
  console.log(paperList.value);

  let res = await addList({
    level: paperList.value.level,
    subjectId: paperList.value.subjectId,
    paperType: paperList.value.paperType,
    name: paperList.value.name,
    suggestTime: paperList.value.suggestTime,
    limitDateTime: paperList.value.limitDateTime,
    titleItems: titleList.value,
    score: paperList.value.score,
  });
  console.log(res);
};
onMounted(() => {
  findPaper();
});
</script>
<style lang="scss" scoped>
.text {
  font-size: 14px;
  p {
    line-height: 30px;
  }
}

.item {
  margin-bottom: 18px;
}
.el-card {
  overflow: auto;
}
.box-card {
  width: 270px;
  font-size: 14px;
  height: calc(100vh - 120px);
  p {
    line-height: 25px;
  }
}
.box-card1 {
  width: 1400px;
  font-size: 14px;
  height: calc(100vh - 120px);
  p {
    line-height: 25px;
  }
}
.active {
  background-color: var(--el-color-success-light-8);
  color: var(--el-color-success);
  border: 1px solid var(--el-color-success);
}
::v-deep .u-time {
  span {
    color: #f00;
  }
}
</style>
